<template>
  <view class="page">
    <view class="tabs">
      <view v-for="(item, index) in tab.list" :key="index" class="tab" :class="{active: index === tab.current}"
        @click="change(index)">{{item.name}}</view>
    </view>
    <scroll-view class="scroll-list" scroll-y="true" scroll-with-animation="true">
      <view :style="talkStyle">
        <u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left">
          <u-form-item v-if="currPersonType === 1" label="谈话方式" prop="talkType" label-width="180" required>
            <!-- <js-select @input="talkTypeChange" v-model="model.talkType" dict-type="mis_talk_type" itemLabel="dictValue" itemValue="dictKey" placeholder="请选择选项" :disabled="disabled"></js-select> -->
            <js-radio @input="talkTypeChange" v-model="model.talkType" dict-type="mis_talk_type" itemLabel="dictValue"
              itemValue="dictKey" :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item v-if="model.talkType!='' && currPersonType===1" label="谈话学生" prop="talkUserId" label-width="180"
            required count>
            <view>
              <view v-if="showClose">
                <u-tag :text="item.name" shape="circle" type="success" v-for="(item,index) in model.userList"
                  :key="item.id" closeable @close="handleClose(item)" />
              </view>

              <view v-if="!showClose">
                <u-tag :text="item.name" shape="circle" type="success" v-for="(item,index) in model.userList"
                  :key="item.id" @close="handleClose(item)" />
              </view>
            </view>
            <view style="text-align: right; margin-left: 10rpx;">
              <u-button v-if="!disabled" class="btn" type="primary" @click="chooseStudent" size="mini">
                <u-icon name="checkmark"></u-icon>
                <text style="padding-right: 4px;">选择</text>
              </u-button>
            </view>
          </u-form-item>
          <u-form-item label="谈话时间" prop="talkTime" label-width="180" required count>
            <view v-if="disabled">
              {{model.talkTime}}
            </view>
            <view v-else @click="talkTimeShow = true" style="width: 100%;">
              <view>{{model.talkTime==''?'请选择时间':model.talkTime}}</view>
            </view>
          </u-form-item>
          <u-form-item label="谈话地点" prop="talkAddressType" label-width="180" required count>
            <js-radio v-model="model.talkAddressType" dict-type="mis_talk_address" itemLabel="dictValue"
              itemValue="dictKey" :disabled="disabled"></js-radio>
          </u-form-item>
          <u-form-item label="具体地点" prop="talkRealAddress" label-width="180" required count>
            <u-input type="input" placeholder="请输入具体地点" v-model="model.talkRealAddress" :disabled="disabled" />
          </u-form-item>
          <u-form-item v-if="isLoaded && currPersonType===1" label="谈话类型" prop="talkSubject" label-width="180" required
            count>
            <js-checkbox v-model="model.talkSubject" dict-type="mis_talk_subject" itemLabel="dictValue"
              itemValue="dictKey" :disabled="disabled"></js-checkbox>
          </u-form-item>
          <u-form-item label="谈话主题" prop="talkTitle" label-width="180" required count label-position="top"
            v-if="currPersonType===1">
            <u-input type="input" placeholder="请输入谈话主题" v-model="model.talkTitle" :disabled="disabled" />
          </u-form-item>
          <u-form-item label="谈话内容" prop="talkContent" label-width="180" required count label-position="top">
            <u-input type="textarea" placeholder="请输入谈话内容" v-model="model.talkContent" :disabled="disabled"
              style="text-align: left;" height="100" maxlength="500" />
          </u-form-item>
          <u-form-item label="创建时间" prop="createTime" label-width="180"
            v-if="model.createTime!=null && currPersonType===1">
            {{model.createTime}}
          </u-form-item>
          <u-form-item label="附件" label-width="90" v-if="currPersonType===1">
            <view class="pre-box" v-if="model.attach.length>0">
              <view class="pre-item" v-for="(item, index) in model.attach" :key="index">
                <image class="pre-item-image" :src="item.value" mode="aspectFit"></image>
              </view>
            </view>
            <my-image-upload ref="myImageUpload" :disabled="disabled" :maxCount="1"
              :fileList="model.fileList"></my-image-upload>
          </u-form-item>
        </u-form>
        <view v-if="!disabled" class="footer">
          <view class="form-button primary" @click="submit">保存</view>
          <view class="form-button" @click="cancel">取消</view>
        </view>
        <view v-else class="footer">
          <u-button class="btn" type="warning" style="width: 100%;"
            v-if="hasPermission('misAssistantTalk_rate') && model.rateCnt === 0 && model.talkType != '3' && model.talkUserId.includes(this.vuex_userId)"
            @click="navTo('rateForm?talkId='+model.id)">评价</u-button>
          <u-button class="btn" type="primary" style="width: 100%;"
            v-if="hasPermission('misAssistantTalk_feedback') && model.feedbackCnt > 0 && model.createUser == this.vuex_userId"
            @click="navTo('feedbackForm?talkId='+model.id)">反馈</u-button>
        </view>
      </view>

      <view :style="rateStyle">
        <view v-for="(item, index) in model.rateList" :key="index">
          <u-card :show-head="false" :head-border-bottom="false">
            <view class="" slot="body">
              <u-form-item label="反馈学生" prop="rateUserName" label-width="180">
                {{item.rateUserName}}
              </u-form-item>
              <u-form-item label="谈话内容是否属实" prop="rateTalkIsRealName" label-width="180">
                {{item.rateTalkIsRealName}}
              </u-form-item>
              <u-form-item label="对本次谈话的建议" prop="rateContent" label-width="180">
                {{item.rateContent==null || item.rateContent==''?"无":item.rateContent}}
              </u-form-item>
              <u-form-item label="辅导员回复" prop="feedback" label-width="180">
                {{item.feedback==null || item.feedback==''?"无":item.feedback}}
              </u-form-item>
            </view>
          </u-card>
        </view>
        <view v-if="model.rateList.length<=0">无反馈</view>
      </view>
    </scroll-view>
    <JsPopup ref="studentRef" v-if="!disabled" :defaultVaule="model.userList" @submit="doSelected"
      :multiple="popup.multiple" :mode="popup.mode" action="/api/blade-system/user/user-list-by-class-mobile">
    </JsPopup>
    <u-picker v-model="talkTimeShow" mode="time" :params="params" @confirm="handleDateConfirm" :disabled="disabled">
    </u-picker>
  </view>
</template>

<script>
  import MyImageUpload from '@/components/my-uploadfile/my-image-upload.vue'
  import JsPopup from '@/components/js-popup/js-popup.vue'
  import {
    validatenull
  } from '@/common/validate.js'
  import {
    selectDictValue
  } from '@/common/dict.js'
  export default {
    components: {
      MyImageUpload,
      JsPopup
    },
    data() {
      return {
        model: {
          id: '',
          talkType: null,
          talkUserId: '',
          talkAccount: '',
          talkTime: '',
          talkAddressType: null,
          talkRealAddress: '',
          talkSubject: '',
          talkContent: '',
          attach: '',
          userList: [],
          fileList: [],
          rateList: []
        },
        disabled: true,
        talkTimeShow: false,
        showClose: false,
        isLoaded: false,
        currPersonType: null,
        params: {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: true
        },
        popup: {
          isVisible: false,
          mode: "bottom",
          multiple: false,
        },
        tab: {
          list: [],
          current: 0
        },
        talkStyle: 'display: block;',
        rateStyle: 'display: none;margin:10rpx;',
        rules: {
          talkType: [{
            required: true,
            message: '请选择谈话类型',
            trigger: ['change', 'blur'],
          }],
          talkUserId: [{
            required: true,
            message: '请选择谈话学生',
            trigger: ['change', 'blur'],
          }],
          talkTime: [{
            required: true,
            message: '请选择谈话时间',
            trigger: ['change', 'blur'],
          }],
          talkAddressType: [{
            required: true,
            message: '请选择谈话地点',
            trigger: ['change', 'blur'],
          }],
          talkRealAddress: [{
            required: true,
            message: '请选择具体地址',
            trigger: ['change', 'blur'],
          }],
          talkSubject: [{
            required: true,
            message: '请选择谈话主题',
            trigger: ['change', 'blur'],
          }],
          talkContent: [{
            required: true,
            message: '请填写谈话内容',
            trigger: ['change', 'blur'],
          }]
        },
      };
    },
    mounted() {

    },
    onLoad(params) {
      if (params.id) {
        this.$u.api.mis.misAssistantTalk.detail({
          id: params.id
        }).then(res => {
          Object.assign(this.model, res.data);
          this.model.talkType = this.model.talkType.toString();
          this.model.talkAddressType = this.model.talkAddressType.toString();
          let talkUserIdList = this.model.talkUserId.split(",");
          let talkUserNameList = this.model.talkUserName.split(",");
          let tmpList = [];
          for (let i = 0; i < talkUserIdList.length; i++) {
            tmpList.push({
              id: talkUserIdList[i],
              name: talkUserNameList[i]
            });
          }
          this.model.userList = tmpList;
          if (!validatenull(this.model.attach)) {
            this.model.attach = JSON.parse(this.model.attach);
          }
          this.isLoaded = true;
        });
        this.tab.list.push({
          name: '表单信息'
        }, {
          name: '反馈与回复'
        })
      } else {
        this.disabled = false;
        this.showClose = true;
        this.tab.list.push({
          name: '表单信息'
        })
        this.isLoaded = true;
      }
      this.currPersonType = this.vuex_personType;
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    watch: {

    },
    methods: {
      submit() {
        let list = this.$refs.myImageUpload.getFileList();
        if (list.length > 0) {
          this.model.attach = JSON.stringify(list);
        }
        this.$refs.uForm.validate(valid => {
          if (valid) {
            uni.showLoading({
              title: '提交中....'
            })
            this.$u.api.mis.misAssistantTalk.save(this.model).then(res => {
              uni.hideLoading();
              uni.showModal({
                title: '提示',
                content: res.msg,
                showCancel: false,
                success: function() {
                  if (res.code == 200) {
                    uni.navigateTo({
                      url: 'index'
                    });
                  }
                }
              });
            });
          } else {
            this.$u.toast('您填写的信息有误，请根据提示修正。');
          }
        });
      },
      cancel() {
        uni.navigateTo({
          url: 'index'
        });
      },
      handleDateConfirm(e) {
        this.model.talkTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ":" + e.minute + ":" + e.second;
        this.talkTimeShow = false;
      },
      chooseStudent() {
        this.$refs.studentRef.setDefaultVal(this.model.userList);
        this.$refs.studentRef.open();
        // this.popup.isVisible=true;
      },
      doSelected() {
        this.model.userList = this.$refs.studentRef.getData();
        let userId = [];
        if (this.model.userList.length > 0) {
          let list = [];
          this.model.userList.forEach(item => {
            list.push(item.id);
          });
          this.model.talkUserId = list.join(",");
        } else {
          this.model.talkUserId = '';
        }
        this.$refs.studentRef.close();
        // this.popup.isVisible=false;
      },
      handleClose(tag) {
        this.model.userList.splice(this.model.userList.indexOf(tag), 1);
      },
      talkTypeChange(val) {
        if (val === '2' || val === '3') {
          this.popup.multiple = true;
        } else if (val === '1') {
          this.popup.multiple = false;
        } else {
          this.popup.multiple = false;
          this.model.userList = [];
        }
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      change(index) {
        this.tab.current = index;
        if (index == 0) {
          this.talkStyle = 'display: block;';
          this.rateStyle = 'display: none;';
        } else {
          this.talkStyle = 'display: none;';
          this.rateStyle = 'display: block;margin:10rpx;';
        }
      },
      // popupClose(){
      // 	this.popup.isVisible=false;
      // }
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .tabs {
    position: relative;
    display: flex;
    height: 88rpx;
    background: #fff;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      display: block;
      border-top: 1px solid #F7F7F7;
    }

    .tab {
      position: relative;
      width: 100%;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #999;

      &::after {
        content: '';
        position: absolute;
        bottom: 4rpx;
        left: 50%;
        display: inline-block;
        width: 32rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background: transparent;
        transform: translateX(-50%);
      }

      &.active {
        font-weight: 700;
        color: #333;

        &::after {
          background: #3989FC;
        }
      }
    }
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 88rpx);

    .loadmore {
      padding: 32rpx;
    }
  }

  .form {
    padding: 24rpx;
  }

  .u-form-item {
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;

    &::after {
      display: none;
    }
  }

  .footer {
    display: flex;
    padding: 0 24rpx 32rpx;
  }

  .form-button {
    width: 100%;
    height: 96rpx;
    border-radius: 48rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #999;
    background: #fff;

    &.primary {
      color: #fff;
      background: #3989FC;
    }

    &+.form-button {
      margin-left: 24rpx;
    }
  }
</style>